<template>
	<div class="root-box">
		<div class="content-box">
			<span class="nav-title">徐闻文旅大数据分析系统</span>
			<div class="right-box">
				<div class="search-box">
					<el-input v-model="searchValue" placeholder="请输入关键词搜索......" size="small" clearable style="width: 240px"></el-input>
					<img src="../assets/img/search.png" alt="" />
				</div>
				<div class="user-box">
					<img src="../assets/img/avatar.png" alt="" />
					<span class="user-text">xxxxxx</span>
				</div>
				<div class="login-box">
					<img src="../assets/img/退出.png" alt="" />
					<span class="quit-text">退出</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			searchValue: "",
		};
	},

	mounted() {},

	methods: {},
};
</script>

<style lang="scss" scoped>
.root-box {
	width: 100%;
	height: 60px;
	background: #242f42;
	padding: 0 26px;
	margin: auto;

	.content-box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.nav-title {
			font-size: 30px;
			font-family: AdobeHeitiStd;
			font-weight: normal;
			text-align: left;
			color: #fff;
		}

		.right-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 12px;
				width: 300px;
				height: 40px;
				background: #F8F8FF;
				border: 1px solid rgb(50, 65, 87);
				border-radius: 20px;
			}

			.user-box {
				margin-left: 70px;
				display: flex;
				align-items: center;
				cursor: pointer;

				.user-text {
					font-size: 14px;
					font-family: MicrosoftYaHei;
					font-weight: normal;
					text-align: left;
					color: #fff;
					padding-left: 8px;
				}
			}

			.login-box {
				margin-left: 30px;
				display: flex;
				align-items: center;
				cursor: pointer;

				.quit-text {
					font-size: 14px;
					font-family: MicrosoftYaHei;
					font-weight: normal;
					text-align: left;
					color: #fff;
					padding-left: 8px;
				}
			}
		}
	}
}

::v-deep.search-box .el-input__inner {
	background: transparent;
	border: none;
	color: #666666;
}
</style>
